import React, { useEffect, useRef, useState } from 'react'
import MyHead from '../../components/MyHead'
import { useSelector, useDispatch } from 'react-redux';
import { changeUserInfo, getUserInfoAsync } from './../../rtk/modules/data';
import './index.scss'
import { useNavigate } from 'react-router-dom';
import { List, Button, Dialog, Modal, Mask } from 'antd-mobile'
import {
    UnorderedListOutline,
    PayCircleOutline,
    SetOutline,
    HistogramOutline,
    CheckShieldOutline,
    ExclamationTriangleOutline,
} from 'antd-mobile-icons'
import Dao from '../../hooks/Dao';
import { ShowMsg } from '../../utils/message'
import UploadFile from '../../components/UploadFile';
import { Ajax } from '../../api/api';
import { baseURL } from '../../api/request';

const Mine = () => {

    let userInfo = useSelector((state: any) => state.data.userInfo)
    const [visible, setVisible] = useState<boolean>(false)
    const [cache, setCache] = useState<number>(Math.ceil(Math.random() * 100))
    const defaultImg = ''
    const dispatch = useDispatch() as any;
    const cartList = useSelector((state: any) => state.data.cartList)
    const router = useNavigate()
    const avatarRef: any = useRef()

    const [likeData, setLikeData] = useState({
        likes: [],
        collects: []
    })

    const getLikeData = async () => {
        let data = await Ajax.getlikesdatabyphone({
            hasLike: 1
        }) as any;

        let res = await Ajax.getlikesdatabyphone({
            hasCollect: 1
        }) as any;

        setLikeData(Object.assign({}, {
            likes: data.result,
            collects: res.result
        }))
    }


    useEffect(() => {
        dispatch(getUserInfoAsync({ id: 123 }))
        getLikeData()
    }, [dispatch])

    const uploadFile = () => {
        avatarRef.current.upload()
    }

    const changePath = async (path: any) => {
        let res = await Ajax.changeuserinfo({
            avatar: path
        }) as any
        if (res.code == 200) {
            console.log(userInfo)
            dispatch(changeUserInfo(Object.assign({}, userInfo, { avatar: path })))
        }
    }


    return (
        <div className='mine'>
            <MyHead title='个人中心' back={!!1}></MyHead>
            <div className="mine-top">
                {
                    userInfo && <UploadFile ref={avatarRef} changePath={changePath}>
                        {
                            userInfo.avatar ? <img className="avatar" src={userInfo.avatar.replace(/public/, baseURL)} alt="" onClick={uploadFile} />
                                : <img className="avatar" src={defaultImg} alt="" onClick={uploadFile} />
                        }
                    </UploadFile>
                }
                <div className="info">
                    {
                        userInfo ? <div >
                            <span> {userInfo.username}</span> - <span> {userInfo.phone} </span>
                        </div>
                            :
                            <h2 onClick={() => router('/login')}>立即登录</h2>
                    }
                </div>
            </div>

            <ul className="list">
                <li className="item">
                    <div className="value">0</div>
                    <div className="label">优惠券(张)</div>
                </li>
                <li className="shu"></li>
                <li className="item">
                    <div className="value">100</div>
                    <div className="label">余额(元)</div>
                </li>
            </ul>

            <div className="group">
                <div className="group-box">
                    <List mode='card' header='我的信息'>
                        {
                            userInfo && (<div>
                                <List.Item extra='5' arrow>
                                    我的订单
                                </List.Item>
                                <List.Item extra={likeData.likes.length} arrow onClick={() => router('/mylikes/1')}>
                                    我的点赞
                                </List.Item>
                                <List.Item extra={likeData.collects.length} arrow onClick={() => router('/mylikes/2')}>
                                    我的收藏
                                </List.Item>

                                <List.Item extra='2' arrow>
                                    我的评论
                                </List.Item>
                                <List.Item arrow onClick={() => router('/changepass')}>
                                    修改密码
                                </List.Item>
                                <List.Item extra='120' arrow>
                                    联系人
                                </List.Item>
                                <List.Item extra='0' arrow>
                                    地址管理
                                </List.Item>
                                <List.Item extra='0' arrow>
                                    历史足迹
                                </List.Item>
                            </div>
                            )
                        }
                        <List.Item prefix={<HistogramOutline />} arrow>帮助中心</List.Item >
                        <List.Item prefix={<ExclamationTriangleOutline />} arrow>公告</List.Item >
                        <List.Item prefix={<CheckShieldOutline />} arrow>联系我们</List.Item >
                        <List.Item prefix={<UnorderedListOutline />} arrow>关于我们</List.Item >
                        <List.Item extra={cache + 'M'} onClick={() => {
                            if (cache == 0) {
                                ShowMsg('暂无缓存数据')
                            } else {
                                setVisible(true)
                            }
                        }} prefix={<PayCircleOutline />}>清除缓存</List.Item >
                        <List.Item prefix={<SetOutline />}  >设置</List.Item>
                    </List>
                </div>
            </div>

            {
                userInfo &&
                <div className="logout">
                    <Button block color='default'
                        onClick={() =>
                            Dialog.confirm({
                                content: '你确定要退出登录吗?',
                                onConfirm: async () => {
                                    sessionStorage.removeItem('appToken')
                                    dispatch(changeUserInfo(null))
                                },
                            })
                        }
                    >注销登录 </Button>
                </div>
            }


            <Mask visible={visible} style={{ zIndex: 12220 }} >
                <div className="daobox" style={{ width: '100%', height: '100%' }}>
                    <Dao onEnd={() => {
                        setCache(0)
                        ShowMsg('缓存清除成功')
                        setVisible(false)
                    }} time={5 * 1000} style={{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}></Dao>
                </div>
            </Mask>
        </div>
    )
}

export default Mine